<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const formData = ref({
  releaseStatus: '1',
  content: '',
  jumpLink: '',
  time: [] as string[],
});
const formRef = ref<FormInstance>();
const { success } = useNotification();
const { t } = useI18n();

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopNotice/getNoticeDetail', {
    method: 'post',
    data: {
      id: props.id,
    },
  });

  if (isSuccess) {
    formData.value = {
      releaseStatus: data.releaseStatus,
      content: data.content,
      jumpLink: data.jumpLink,
      time: [data.startTermOfValidity, data.endTermOfValidity],
    };
  }
}

const init = () => {
  if (props.id) {
    getDetail();
  }
}

init();

const dialogClickButton = async (button: string) => {
  if (button !== 'ok') {
    return;
  }

  const res = await formRef.value?.validate();

  if (res) {
    return false;
  }

  const { time, ...rest } = formData.value;

  const { isSuccess } = await $fetch(props.id ? '/admin/atomgitPopNotice/update' : '/admin/atomgitPopNotice/add', {
    method: 'post',
    data: {
      id: props.id,
      startTermOfValidity: time[0],
      endTermOfValidity: time[1],
      ...rest,
    },
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
  }

  return isSuccess;
}

defineExpose({
  dialogClickButton,
});
</script>

<template>
  <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData">
    <AFormItem :label="t('settings.view.notice.content')" field="content" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 150 }]">
      <AInput v-model="formData.content" :max-length="150" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem :label="t('settings.view.notice.jumpLink')" field="jumpLink" :rules="[ { maxLength: 150 }]">
      <AInput v-model="formData.jumpLink" :max-length="150" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem :label="t('settings.view.notice.timedRelease')" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <ARadioGroup v-model="formData.releaseStatus">
        <ARadio :value="'2'">{{ t('settings.view.notice.yes') }}</ARadio>
        <ARadio :value="'1'">{{ t('settings.view.notice.no') }}</ARadio>
      </ARadioGroup>
    </AFormItem>

    <AFormItem v-if="formData.releaseStatus === '2'" :label="t('settings.view.notice.releaseTime')" field="time" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <ARangePicker v-model="formData.time" show-time />
    </AFormItem>

    <AFormItem v-else :label="t('settings.view.notice.endTime')" field="time" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <ADatePicker v-model="formData.time[1]" show-time />
    </AFormItem>
  </AForm>
</template>

<style lang="scss" scoped>
</style>
